<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>make cake!</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Happy Birthday</title>
   
</head>
<body>

<div class="overflow">
<div class="scenes">
    <div class="items">
        <div class="egg"></div>
        <div class="egg-2 hide"></div>
        <div class="egg-trial">
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 450" style="enable-background:new 0 0 50 792;" xml:space="preserve">
        <defs>
          <clippath id="egg-mask">
            <rect id="egg-mask-rect" x="0" y="0" width="100" height="0" />
          </clippath>
        </defs>
          <style type="text/css">
            .st0{fill:#FFCC00 ;}
            .st1{fill:#FFEB0D;fill-opacity:0.75;}
            .st2{fill:#FFFFFF;}
          </style>
         <path fill="#FFCC00" d="m13.1,29.84994c0,0 -0.2,0.03821 -0.2,17.61778l0.1,0l0,0.2293l0,256.20298l6,-0.47771l0,-255.95457l0.1,0c0,-26.36934 -10.35,193.37517 0.85,188.13951l17.25,-226.75723c-37.6,-14.78976 -24.1,20.99992 -24.1,20.99992l0,0.00001z" clip-path="url(#egg-mask)" id="svg_1" />
          </svg>

              <div class="batter-in-blender">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 164 154" style="enable-background:new 0 0 164 154;" xml:space="preserve">
            <defs>
              <clippath id="pot-mask">
                <rect id="blenderFill" x="0" y="140" width="200" height="400" />
              </clippath>
            </defs>
            <g>

        <path stroke="null" clip-path="url(#pot-mask)" d="m114,129l-61.5,0c-6.6,0 -12,-7.90986 -12,-17.57747l0,-68.84506c0,-9.66761 5.4,-17.57747 12,-17.57747l61.5,0c6.6,0 12,7.90986 12,17.57747l0,68.84506c0,9.66761 -5.4,17.57747 -12,17.57747z" id="svg_2" fill="#FFCC00"/>
             </g>
          </svg>
            </div>

        </div>
        <div class="flour"></div>
        <div class="sugar"></div>
        <div class="fill-blender"></div>

        <div class="blender"><div class="handle"></div></div>

        <div class="grounded hide">
            <span class="batter batter-1"></span>
            <span class="batter batter-2"></span>
            <span class="batter batter-3"></span>
            <span class="batter batter-4"></span>
            <span class="batter batter-5"></span>
            <span class="batter batter-6"></span>
            <span class="batter batter-7"></span>
        </div>
    </div>
    <section class="scene scene-1">

        <svg id="hat">
            <path  d="M77.5,92.2v5.1c0,1.3-1.1,2.4-2.4,2.4H24.9c-1.3,0-2.4-1.1-2.4-2.4v-5.1H77.5z M75.1,13.9
	c-1.1,0-2.2,0.1-3.4,0.2C67.6,6.1,59.3,1,50,1S32.4,6.1,28.3,14.1c-1.1-0.2-2.2-0.2-3.4-0.2c-13.4,0-24.3,10.7-24.3,23.8
	c0,12.3,9.6,22.5,21.9,23.7v26h7V62.9c0-1.3,1.1-2.4,2.4-2.4s2.4,1.1,2.4,2.4v24.6h13.2V62.9c0-1.3,1.1-2.4,2.4-2.4
	c1.3,0,2.4,1.1,2.4,2.4v24.6h13.2V62.9c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4v24.6h7v-26c12.3-1.2,21.9-11.4,21.9-23.7
	C99.4,24.6,88.5,13.9,75.1,13.9z"/>
        </svg>
        <div class="text">
            <p class="intro">
                <span class="intro1">OMG!!!</span>
                <span class="intro1" >It's your <b>Birthday!</b></span>
                <span class="intro2" >Time to put on </span>
                <span class="intro2" >my chef's hat!</span>
            </p>
            <p class="small-text">
                <span>Follow my cake</span>
                <span>baking journey.</span>
            </p>
        </div>
        <div class="egg-stop">
        </div>

        <div class="text text-bottom fade">
            <p>
                <span>Task #1</span>
            </p>
            <p>
                 Blend egg with sugar and flour
            </p>
        </div>
        <div class="beat-egg"> </div>

    </section>


    <section class="scene scene-2">
        <div class="text">
            <p>Task #2</p>
            <p>Time to pour the batter in a pan </p>
        </div>

    </section>
</div>


<div class="scenes">
    <div class="items">
        <div class="pan-wrapper">
            <div class="pan-hide"></div>
            <div class="pan">
                <div class="foreground"></div>
                <div class="background"></div>
            </div>
            <div class="pan-with-batter hide">
                <div class="foreground"></div>

            </div>
        </div>
        <div class="oven-hide"></div>

        <div class="oven"></div>
        <div class="oven-with-pan hide">

            <div class="the-oven"></div>

        </div>
        <div class="start-pouring"></div>
      
    </div>
    <section class="scene scene-3">
        <div class="text" style=color:black;">
            <p>Task #3</p>
            <p>Bake Time! </p>
        </div>
    </section>
    <section class="scene scene-4"></section>
</div>
<div class="scenes">
    <div class="items">
        <div class="cake-container">
            <div class="cake hide">
                <div class="inside"></div>
                <div class="candle"></div>
            </div>

        </div>

        <div class="scene-4-text">
            <p>Task #4</p>
            <p>Let's add some Icing!</p>
        </div>
    </div>
    <section class="scene scene-5">
        <div class="text" style=color:black;">

            <p>It's almost ready!!!</p>

        </div>

    </section>
    <section class="scene scene-6">
     
        <div><p class="hbd hide">HAPPY BIRTHDAY!</p></div>
        <div class="text">
            <p>
                The most important thing for the new year is to be happy every day! I also hope we can be good friends forever! ---zqy
            </p>
            <button >
            <a href="../index.html">
            </a>
            </button>

          <br>
            <p>
                <a href="../index.html"   target="_blank">Back to fireworks</a>
            </p>

            <div style="color:#363636"> <p >
                2022年3月31日
             </p></div>
           
         </br>

        </div>
        <ul class="myInfo">
            <li>
                <p>身体健康</p>
            </li>
            <li>
                <p>学业有成</p>
            </li>
            <li>
                <p>早日暴富</p>
            </li>
            <li>
                <p>暴富后带我飞</p>
            </li>

        </ul>
    </section>
</div>
</div>

</body>
</html>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js'></script>
<script src='https://asmitashinde.com/projects/js/birthday/ScrollMagic.js'></script>
<script src='https://asmitashinde.com/projects/js/birthday/birthday.js'></script>
</body>
</html>
